<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(list, index) in lists" :key="index">
      <div class="slide-wraper">
        <div class="slide-img">
          <img :src="list.url" :alt="list.title" @click="showHrefByImage(list)" />
        </div>
        <div class="slide-title">
          <div class="title">{{ list.title }}</div>
        </div>
      </div>
    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar" slot="scrollbar"></div>-->
  </swiper>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

import banner1 from "@/assets/images/ban11.jpg";
import banner2 from "@/assets/images/ban22.jpg";
import banner3 from "@/assets/images/ban33.jpg";
import banner4 from "@/assets/images/ban44.jpg";
import banner5 from "@/assets/images/banner31.jpg";
export default {
  name: "BannerSwiper",
  data() {
    return {
      swiperOption: {
        autoplay: true,
        speed: 1300,
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      lists: [
        {
          url: banner1,
          title: "2019年超级123大会完满结束"
        },
        {
          url: banner2,
          title: "2019年超级456大会完满结束"
        },
        {
          url: banner3,
          title: "2019年超级789大会完满结束"
        },
        {
          url: banner4,
          title: "2019年超级987大会完满结束"
        },
        {
          url: banner5,
          title: "2019年超级555大会完满结束"
        }
      ]
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // eslint-disable-next-line no-console
    //console.log("this is current swiper instance object", this.swiper);
    //this.swiper.slideTo(0, 1000, false);
  },
  methods: {
    showHrefByImage(item) {
      console.log(item);
    }
  }
};
</script>

<style lang="less">
.slide-wraper {
  position: relative;
  .slide-img {
    img {
      border: 0;
      width: 100%;
      height: 256px;
      overflow: hidden;
    }
  }
  .slide-title {
    width: 100%;
    position: absolute;
    height: 2rem;
    bottom: 3px;
    left: 0;
    background: linear-gradient(rgba(23, 22, 23, 0.8), rgba(23, 22, 23, 0.8));
    z-index: 10;
    opacity: 0.6;
    .title {
      width: 60%;
      padding: 0.5rem;
      color: #ffffff;
      font-size: 14px;
    }
  }
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  position: absolute;
  bottom: 10px;
  left: inherit;
  right: 24px;
  width: 40%;
  text-align: right !important;
}
</style>
